<template>
    <div class="top">
        <div class="left">
            <img src="../img/5.jpeg" alt="">
        </div>
        <div class="right">
            <transition name="fade"  v-on:after-leave="afterLeave">
            <div class="form" v-if="isShow">
                <h1 style="font-weight: bold;margin-left: 25%;font-size: 30px;margin-bottom: 10%;">登录</h1>
                <el-form label-width="80px" :model="formLabelAlign" :rules="rules" style="width: 300px; margin: auto;">
                    <el-form-item label="用户名" prop="Username">
                        <el-input v-model="formLabelAlign.Username" />
                    </el-form-item>
                    <el-form-item label="密码" prop="Password" >
                        <el-input v-model="formLabelAlign.Password" show-password />
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="userLogin">用户登录</el-button>
                        <el-button type="primary" @click="hostLogin" style="left: 12%;">商家登录</el-button>
                       <div class="regbtn">
                        <el-button  @click="isShow = false">注册</el-button>
                       </div>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <transition name="fade" v-on:after-leave="afterLeave1">
            <div class="form" v-if="isregister">
                <h1 style="font-weight: bold;margin-left: 10%;font-size: 30px;margin-bottom: 10%;">注册</h1>
                <el-form label-width="80px" :model="formLabelAlign" :rules="rules" style="width: 300px; margin: auto;">
                    <el-form-item label="用户名" prop="Username"  >
                        <el-input v-model="formLabelAlign.Username" placeholder="一个彰显气质的名字" />
                    </el-form-item>
                    <el-form-item label="密码"  prop="Password" >
                        <el-input v-model="formLabelAlign.Password" show-password />
                    </el-form-item>
                    <el-form-item label="手机号"  prop="Phone">
                        <el-input v-model="formLabelAlign.Phone"  type="text" />
                    </el-form-item>
                    <el-form-item label="地址" required=true >
                        <el-input v-model="formLabelAlign.Address" />
                    </el-form-item>
                    <el-form-item label="身份选择" required=true >
                        <el-select v-model="formLabelAlign.Type" class="m-2" placeholder="选择" @change="(val:any)=>{isBusiness(val)}" >
                            <el-option v-for="item in options" :key="item" :label="item" :value="item"  />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商店名称" required=true v-if="isShowShop">
                        <el-input v-model="formLabelAlign.shopName" />
                    </el-form-item>
                   <el-form-item>
                        <el-button type="primary" @click="register">确定注册</el-button>
                        <el-button @click="isregister=false">转到登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import router from '@/router';
import {Login,Register} from '@/api/login'
import type {  FormRules } from 'element-plus';
const isShow = ref(true)
const isregister = ref(false)
const options = ["商家", "用户"]
const formLabelAlign:user= reactive({
    Username: '',
    Password: '',
    Type: '',
    Phone:123,
    Address:"",
    shopName:""
})
let isShowShop = ref(false)
//选择商家增加选项
function isBusiness(val:any){
    console.log("商家")
    if(val==="商家"){
    isShowShop.value = true
}else{
    isShowShop.value = false
}
}

//登录函数
function userLogin(){
    console.log(formLabelAlign)
    Login(formLabelAlign,true)
}
function hostLogin(){
    console.log(formLabelAlign)
    Login(formLabelAlign,false)
}
//注册函数
function register() {
    console.log(formLabelAlign)
    Register(formLabelAlign)
}
//切换登录或者注册
function afterLeave(){
    isregister.value=!isregister.value
}
function afterLeave1(){
    isShow.value=!isShow.value
}
//表单验证规则
const rules = reactive<FormRules>({
    Username: [
    { required: true, message: '请输入有效的用户名！', trigger: 'blur' },
    { min: 1, max: 5, message: '用户名在1-5个字之间', trigger: 'blur' },
    ],
    Password: [
        {
            required:true,message: '请输入密码！', trigger: 'blur'
        }
    ],
    Phone:[
        { required: true, message: '请填写您的电话号码' },
        { type: 'number', message: '这并不是一个数字！',transform:(value)=>Number(value) },
    ]
})
</script>
<style>
img {
    height: 100%;
    width: 70%;
}
.regbtn{
    top: 20%;
    margin: auto;
}

.top {
    height: 80vh;
    width: 100%;
    display: flex;
    text-align: center;
}

.left {
    width: 60%;
}

.right {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.form {
    margin: auto;
    display: flex;
    flex-direction: column;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>